import React, {Component} from 'react';
import {Table, Divider, Tag } from 'antd';
import { connect } from 'dva';
import {USER, USER_INIT} from "../../models/user";

const {Column} = Table;

@connect(
  (state) => ({
    users: state[USER]
  }),
  {
    init: () => ({
      type: USER_INIT
    })
  }
)
export default class List extends Component {
  componentDidMount() {
    this.props.init();
  }

  render() {
    return (
      <div>
        <Table dataSource={this.props.users}
               pagination={{position: "bottom", total: 500, pageSize: 10, defaultCurrent: 3}}>
          <Column
            title="姓名"
            dataIndex="name"
            key="name"
          />
          <Column
            title="年龄"
            dataIndex="age"
            key="age"
          />
          <Column
            title="地址"
            dataIndex="address"
            key="address"
          />
          <Column
            title="标签"
            dataIndex="tags"
            key="tags"
            render={tags => (
              <span>
                {tags.map(tag => <Tag color="blue" key={tag}>{tag}</Tag>)}
              </span>
            )}
          />
          <Column
            title="操作"
            key="action"
            render={(text, record) => (
              <span>
                <a href="javascript:;">编辑</a>
                <Divider type="vertical"/>
                <a href="javascript:;">删除</a>
              </span>
            )}
          />
        </Table>
      </div>
    );
  }
}